<template>
	<view>
		<view>
			<swiper circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in imgArr" :key="index">
					<view>
						<image :src="item.img" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="box">
			<view class="">
				<view class="iconfont icon-ziyuan:before boxzi"  @click="chaoshi">
					
				</view>
				<text style=" margin-left: 10px;">顽石超市</text>
			</view>
			<view class="">
				<view class="iconfont icon-guanyuwomen:before boxzi" @click="lianxi">
					
				</view>
				<text style=" margin-left: 10px;">联系我们</text>
			</view>
			<view class="">
				<view class="iconfont icon-tupian:before boxzi" @click="tupian">
					
				</view>
				<text style=" margin-left: 10px;">社区图片</text>
			</view>
			<view class="">
				<view class="iconfont icon-shipin:before boxzi">
					
				</view>
				<text style=" margin-left: 10px;">学习视频</text>
			</view>
		</view>
		<view class="boxtui">
			推&nbsp;&nbsp;&nbsp;荐&nbsp;&nbsp;&nbsp;商&nbsp;&nbsp;&nbsp;品
		</view>
		<view class="shoujikuai">
			<view class="shoujibox" v-for="(item,index) in phoneArr" :key="index" @click="xiangxi(item.id)">
				<view class="" style="height: 110px;">
					<!-- <image :src="item.img_url" mode=""></image> -->
				</view>
				<text style="color: red;">￥{{item.sell_price}}</text><text style="color: #808080; font-size: 12px; margin-left: 5px; text-decoration: line-through;">{{item.market_price}}</text>
				<view class="">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				duration: 500,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				imgArr:[],
				phoneArr:[],
				pageindex:1
			}
		},
		methods: {
			init(){
				uni.request({
					url:"http://localhost:8082/api/getlunbo",	
					method:"GET",
					success: (data) => {
						console.log(data)
						this.imgArr=data.data.message
					}
				})
			},
			phoneinit(){
				uni.request({
					url:`http://localhost:8082/api/getgoods?pageindex=1`,
					method:"GET",
					success: (data) => {
						console.log(data)
						this.phoneArr=data.data.message
					}
				})
			},
			chaoshi(){
				uni.navigateTo({
					url:"./wanShiShangCheng"
				})
			},
			xiangxi(id){
				uni.navigateTo({
					url:`./wanShiXiangXi?id=${id}`
				})
			},
			lianxi(){
				uni.navigateTo({
					url:'./lianXiWoMen'
				})
			},
			tupian(){
				uni.navigateTo({
					url:'./sheQuTuPian'
				})
			}
		},
		onLoad() {
			this.init(),
			this.phoneinit()
		}
	}
</script>

<style>
	swiper image{
		width: 100%;
	}
	.box{
		display: flex;
		justify-content: space-around;
	}
	.boxzi{
		width: 60px;
		height: 60px;
		background: #B50E03;
		border-radius: 50px;
		margin-top: 10px;
		margin-left: 10px;
		color: white;
		text-align: center;
		line-height: 60px;
		margin-bottom: 10px;
		font-size: 25px;
	}
	.boxtui{
		width: 100%;
		height: 50px;
		border-top: #EDEDED 3px solid;
		color: red;
		font-size: 20px;
		display: flex;
		justify-content: center;
		line-height: 50px;
	}
	.shoujibox{
		height: 200px;
		width: 177px;
		border: 5px solid #EDEDED;
	}
	.shoujikuai{
		display: flex;
		flex-wrap: wrap;
	}
</style>
